<template>
  <view>
    <view class="u-p-24">
      <view class="block">
        <view class="times">
          <image src="../../static/icons/ptty.png" class="type" mode=""></image>
          <view class="time on">
            <view>20:00</view>
            <view>正在进行</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
        </view>
      
        <view class="list" style="overflow-y: auto;display: flex;">
          <view class="coupon-ty" v-for="i in 5" :key="i">
            <view class="main">
              <view class="text-cut font-40">¥10</view>
              <view class="text-cut font-22">满100元可用</view>
              <view class="text-cut font-22">全品类券</view>
            </view>
            
            <view class="btn">立即领取</view>
          </view>
        </view>
      </view>
    </view>

    <view class="u-p-24">
      <view class="block">
        <view class="times">
          <image src="../../static/icons/sjty.png" class="type" mode=""></image>
          <view class="time on">
            <view>20:00</view>
            <view>正在进行</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
          <view class="time">
            <view>20:00</view>
            <view>即将开始</view>
          </view>
        </view>

        <view class="list">
          <view class="coupon" v-for="i in 3" :key="i">
            <image class="pic" src="https://picsum.photos/id/310/200/200"></image>

            <view class="main">
              <view class="font-30 text-cut text-red">返200元</view>
              <view class="font-18 text-cut text-red">单笔支付满1000元</view>
              <view class="font-18 text-cut">仟吉KenGee(宝龙店)全店甜品类通用</view>
              <view class="font-18 text-cut text-orange mt-auto">2019.11.11-2019.12.12</view>
            </view>

            <view class="btn">
              <view>已抢32%</view>
              <view style="width: 120rpx;padding: 8rpx 0;">
                <u-line-progress active-color="#f69140" :percent="32" height="18" :show-percent="false"></u-line-progress>
              </view>
              <view>立即领取</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-tabs :list="tabs" :current="current" bg-color="#fff" @change="change" active-color="#FBBA4E"></u-tabs>
    <view class="u-p-24">
      <view class="block">
      
        <view class="list">
          <view class="coupon" v-for="i in 3" :key="i">
            <image class="pic" src="https://picsum.photos/id/310/200/200"></image>
      
            <view class="main">
              <view class="font-30 text-cut text-red">返200元</view>
              <view class="font-18 text-cut text-red">单笔支付满1000元</view>
              <view class="font-18 text-cut">仟吉KenGee(宝龙店)全店甜品类通用</view>
              <view class="font-18 text-cut text-orange mt-auto">2019.11.11-2019.12.12</view>
            </view>
      
            <view class="btn">
              <view>已抢32%</view>
              <view style="width: 120rpx;padding: 8rpx 0;">
                <u-line-progress active-color="#f69140" :percent="32" height="18" :show-percent="false"></u-line-progress>
              </view>
              <view>立即领取</view>
            </view>
          </view>
        </view>
      </view>
    </view>



    <u-gap height="90"></u-gap>

    <view class="mycp">
      <text>我的卡券</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          }, {
            name: '推荐'
          },
          {
            name: '男装'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">
  .font-40 {
    font-size: 40rpx;
  }
  
  .font-30 {
    font-size: 30rpx;
  }
  
  .font-22 {
    font-size: 22rpx;
  }

  .font-18 {
    font-size: 18rpx;
  }

  .text-red {
    color: #FF4500;
  }

  .text-orange {
    color: #F69140;
  }
  
  .mt-auto {
    margin-top: auto;
  }

  .coupon {
    width: 650rpx;
    height: 160rpx;
    margin: 8rpx auto;
    padding: 8rpx;
    --height: 144rpx;
    display: flex;
    align-items: center;

    background: url(../../static/icons/cp1.png) center / cover no-repeat;

    &.out {
      background: url(../../static/icons/cp2.png) center / cover no-repeat;
    }

    .pic {
      width: var(--height);
      height: var(--height);
      border-radius: 24rpx;
    }

    .main {
      width: 320rpx;
      height: var(--height);
      padding: 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .btn {
      width: var(--height);
      height: var(--height);
      border-radius: 24rpx;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: auto;
      padding-right: 8rpx;
      font-size: 24rpx;
    }
  }
  
  .coupon-ty {
    width: 260rpx;
    height: 150rpx;
    flex-shrink: 0;
    padding: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url(../../static/icons/tycp1.png) center / cover no-repeat;
    
    &.out {
      background: url(../../static/icons/tycp2.png) center / cover no-repeat;
    }
    
    .main {
      width: 200rpx;
      padding: 8rpx;
      height: 100%;
      color: #FFB849;
    }
    
    .btn {
      width: 40rpx;
      height: 100%;
      font-size: 22rpx;
      color: #FFB849;
      line-height: 1.2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .times {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .time {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 18rpx;
      color: #D3D3D3;
    }

    .time.on {
      color: #F6B040;
      background: url(../../static/icons/cp0.png) center / cover no-repeat;
    }

    image.type {
      width: 70rpx;
      height: 80rpx;
    }
  }

  .block {
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx;
  }

  .mycp {
    width: 750rpx;
    height: 90rpx;
    background: #FBBA4E;
    color: #fff;
    font-size: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
  }
</style>
